<template>
  <el-card class="box-card" style="height: 100%;" shadow="never">
    <div class="head-container">
      <div style="margin-left: 15px">
        <el-row>
          <svg t="1710468372537" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
               p-id="6034" data-spm-anchor-id="a313x.search_index.0.i1.6d973a810aYA7h" width="22" height="22" style="margin-top: 15px"><path d="M512 64A448 448 0 1 1 64 512 448 448 0 0 1 512 64m0-64a512 512 0 1 0 512 512A512 512 0 0 0 512 0z" p-id="6035" data-spm-anchor-id="a313x.search_index.0.i2.6d973a810aYA7h" class="selected" fill="#707070"></path><path d="M512 128a384 384 0 1 0 384 384 384 384 0 0 0-384-384z m192 352H544v64H704v64H544v128h-64v-128H320v-64h160v-64H320v-64h123.648l-106.624-128h83.328L512 397.952l91.648-109.952h83.328l-106.624 128H704z" p-id="6036" data-spm-anchor-id="a313x.search_index.0.i0.6d973a810aYA7h" class="selected" fill="#707070"></path></svg>
          <div style="margin-left: 8px">充值记录</div>
        </el-row>
      </div>
    </div>
    <div class="row row--top-20">
      <div class="col-md-12">
        <div class="table-container">
          <!-- 数据表单 -->
          <el-table :data="dataList"
                    style="width: 100%;margin-top: 10px"
                    ref="multipleTable">
            <el-table-column label="充值金额" prop="amount" align="center"/>
            <el-table-column label="充值时间" prop="transactionTime" align="center"/>
            <el-table-column label="商户订单号" prop="outTradeNo" align="center"/>
            <el-table-column label="支付宝交易号" prop="tradeNo" align="center"/>
            <template v-slot:empty>
              <el-empty image-size="80"></el-empty>
            </template>
          </el-table>
          <div class="block">
            <!-- 页号 -->
            <el-config-provider :locale="locale">  <!--切换语言包为中文包-->
              <el-pagination
                  v-model:current-page="pageIndex"
                  v-model:page-size="pageSize"
                  :page-sizes="[5,10,15, 20]"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="totalPage"
                  @size-change="sizeChangeHandle"
                  @current-change="CurrentChangeHandle"
                  style="margin-top: 30px"/>
            </el-config-provider>
          </div>
        </div>
      </div>
    </div>
  </el-card>
</template>
<script>
import axios from 'axios';
import {ElMessage} from "element-plus";
export default{
  name: "RechargeRecord",
  data() {
    return {
      // 页面展示的数据集合
      dataList: [],
      pageIndex: 1,
      pageSize: 5,
      totalPage: 0,
      begin: 0,
      end: this.pageSize - 1,
    }
  },
  methods: {
    /*顯示所有數據*/
    // 改变数组大小
    sizeChangeHandle(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getDataList();
    },
    // 改变当前页号
    CurrentChangeHandle(val) {
      console.log(`当前页: ${val}`);
      this.pageIndex = val;
      this.dataList = [];
      this.getDataList();
    },
    /*表格數據顯示*/
    //0.分页方法
    getPageInfo(pageSize, pageNum) {
      return {
        "pageSize": pageSize,
        "pageNum": pageNum
      }
    },
    //1.查询所有数据
    async getDataList() {
      try {
        const pageInfo = this.getPageInfo(this.pageSize, this.pageIndex);
        console.log(pageInfo);

        const res = await axios.post('/adWallet/getAdTransactionList', pageInfo);

        if (res.status === 200) {
          this.dataList = res.data.data.list;
          this.totalPage = res.data.data.total;
        } else {
          console.error('Error fetching data:', res.statusText);
          ElMessage('获取表单数据失败');
        }
      } catch (error) {
        console.error('Error fetching data:', error);
        ElMessage('获取表单数据失败');
      }
    },
    /*查詢數據*/
    //0.定義查詢信息
    searchUserInfo(pageSize,pageNum,taskName,taskType,isMainQuest){
      return {
        "pageSize": pageSize, "pageNum": pageNum, "taskName":taskName,
        "taskType":taskType,"isMainQuest":isMainQuest
      };
    },
    //1.查询数据
    async searchDataList() {
      console.log('查询数据:', this.inputForm);
      // 在此处添加你的搜索逻辑
      try {
        let taskName = this.inputForm.taskName;
        let taskType = this.inputForm.taskTypeValue;
        let isMainQuest = this.inputForm.isMainQuestValue;
        let searchData = this.searchUserInfo(this.pageSize, this.pageIndex, taskName,taskType,isMainQuest);

        if (taskName||taskType||isMainQuest) {
          const res = await axios.post('/taskManage/searchTask', searchData);
          console.log("查询数据返回值:",res.status);
          if (res.status === 200) {
            this.dataList = res.data.data.list;
            this.totalPage = res.data.data.total;
          } else {
            console.error('Error fetching data:', res.statusText);
            ElMessage('获取表单数据失败');
          }
        } else {
          //  ElMessage('请输入搜索条件');
          this.getDataList();
        }
      } catch (error) {
        console.error('Error fetching data:', error);
        ElMessage('出错了');
        this.getDataList();
      }
    },

  },
  // Use the beforeCreate hook to initialize the 'end' property
  beforeCreate() {
    this.end = this.pageSize - 1;
  },
  mounted() {
    this.getDataList();
  }
}
</script>
<style scoped lang="scss">
@import "@/theme/commonCard.css";
@import "@/theme/commonTable.css";
</style>